<template>
  <div class="search-view">
    <div class="return">
      <Icon size="25" color="#000000" name="arrow-left" class="back" @click="goBack" />
      <van-search v-model="searchContent" shape="round" placeholder="请输入搜索关键词" background="transparent" @search="onSearch">
      </van-search>
    </div>
    <van-tabs v-model="active">
      <van-tab title="综合">
        <div class="show-image">
          <div class="masonry">
            <div class="card" v-for="product in products" :key="product.productId">
              <div class="card-link" @click="handleClick(product.productId)">
                <van-image class="product-image" :src="require('@/' + `${product.imageUrl}`)" />
                <p class="variety">{{ product.productName }}</p>
                <p class="introduction">{{ product.description }}</p>
                <p class="price-container">
                  <span class="currency">¥</span>
                  <span class="price">{{ product.price }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="销量">内容 2</van-tab>
      <van-tab title="店铺">内容 3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Icon, Image as VanImage, Search as VanSearch,Tabs as VanTabs,Tab as VanTab} from 'vant';
import http from "@/plugins/http";

export default {
  name: "SearchView",
  components: {
    Icon, VanImage, VanSearch,VanTabs,VanTab
  },
  data() {
    return {
      active: 0,
      searchContent: this.$route.query.keyword || '',
      products: []
    };
  },
  created() {
    this.fetchProducts();
  },
  watch: {
    $route(to, from) {
      if (to.query.keyword !== from.query.keyword) {
        this.searchContent = to.query.keyword;
        this.fetchProducts();
      }
    }
  },
  methods: {
    handleClick(productId) {
      http.post(`/product/increment-click/${productId}`).then(res => {
        if (res.statusCode === '200' && res.data) {
          console.log("增加点击次数成功");
        }
      }).catch(error => {
        console.error("增加点击次数失败:", error);
      });
      this.$router.push({ name: 'PetView', params: { id: productId } });
    },
    fetchProducts() {
      http.get(`/product/search/${this.searchContent}`)
          .then(response => {
            this.products = response.data || [];
          })
          .catch(error => {
            console.error("获取商品信息出错:", error);
          });
    },
    goBack() {
      this.$router.go(-1);
    },
    onSearch(value) {
      this.$router.push({ name: 'SearchView', query: { keyword: value } });
    }
  }
};
</script>

<style scoped>
.search-view {
  background-color: #F6F7F9;
}

.show-image {
  background-color: #ffffff;
  padding-top: 20px;
}

.masonry {
  column-count: 2;
  column-gap: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 80px;
}

.card {
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 10px;
  width: 100%;
}

.card-link {
  text-decoration: none;
  color: inherit;
}

.product-image {
  width: 100%;
  height: auto;
  display: block;
}

.variety {
  width: 100%;
  text-align: center;
}

.introduction {
  margin-top: 5px;
  color: #999987;
  font-size: 13px;
  padding-left: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price-container {
  margin-top: 5px;
  font-weight: bold;
  padding-left: 13px;
  margin-bottom: 10px;
}

.currency {
  color: #f85f0c;
  font-weight: bold;
  font-size: 20px;
}

.price {
  color: #f85f0c;
  font-weight: bold;
  font-size: 30px;
}

.return {
  background: linear-gradient(to bottom, #faeaea, #f6f7f9);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.back {
  position: absolute;
  left: 10px;
  text-decoration: none;
}
</style>
